<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书</title>
    <link rel="stylesheet" href="/css/books.css">
</head>

<body>
    <h1>图书信息</h1>
    <input type="text" placeholder="请输入关键字" name="keyword" value="{{keyword}}">
    <input type="button" value="搜索" onclick="bookSelect()">
    <input type="button" value="添加" onclick="bookAdd()">
    <div class="table-container">
        <table>
            <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>时间</th>
                <th>简介</th>
                <th>操作</th>
            </tr>
            {% for item in books %}
            <tr class="book{{item.id}}">
                <td>{{item.id}}</td>
                <td>{{item.bookName}}</td>
                <td>{{item.author}}</td>
                <td>{{item.publishedAt}}</td>
                <td>{{item.descriptions}}</td>
                <td>
                    <input type="button" value="编辑" onclick="bookEdit('{{item.id}}')">
                    <input type="button" value="删除" onclick="bookDelete('{{item.id}}')">
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
    <div class="pagination">

        {% if page > 1 %}
        <a href="?page=1&limit={{limit}}&keyword={{keyword}}" class="first-page">首页</a>
        {% else %}
        <span class="disabled first-page">首页</span>
        {% endif %}

        {% if page > 1 %}
        <a href="?page={{page-1}}&limit={{limit}}&keyword={{keyword}}" class="prev">上一页</a>
        {% else %}
        <span class="disabled prev">上一页</span>
        {% endif %}

        {% for i in range(startPage, endPage+1) %}
        {% if i == page %}
        <span class="current-page">{{i}}</span>
        {% else %}
        <a href="?page={{i}}&limit={{limit}}&keyword={{keyword}}">{{i}}</a>
        {% endif %}
        {% endfor %}

        {% if page < totalPages %} <a href="?page={{page+1}}&limit={{limit}}&keyword={{keyword}}" class="next">下一页</a>
            {% else %}
            <span class="disabled next">下一页</span>
            {% endif %}

            {% if page < totalPages %} <a href="?page={{totalPages}}&limit={{limit}}&keyword={{keyword}}"
                class="last-page">
                末页</a>
                {% else %}
                <span class="disabled last-page">末页</span>
                {% endif %}
    </div>
    <script src="/js/axios.min.js"></script>
    <script src="/js/books.js"></script>
</body>

</html>